/***** EFFECTS *****/
a {
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
#nav-thief {
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.hp-box,
.spl-info,
.prd-load,
.cat-filter {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
.spl-info {
    -webkit-box-shadow: 0 0 5px rgba(115,115,115,.4);
    -moz-box-shadow: 0 0 5px rgba(115,115,115,.4);
    box-shadow: 0 0 5px rgba(115,115,115,.4);
}
.hp-box {
    -webkit-box-shadow: 0 0 5px rgba(190,190,190,.75);
    -moz-box-shadow: 0 0 5px rgba(190,190,190,.75);
    box-shadow: 0 0 5px rgba(190,190,190,.75);
}
.pb-mask .circle-red {
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
}
.pb-mask .circle-red .icon-search {
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    transition: all 200ms ease;
}
.popbox,
#prd-holder {
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.1);
    box-shadow: 0 0 5px rgba(0,0,0,.1);
}
.nw-box {
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ===== ANIMATIONS ===== */
/*** Animated funcs ***/
.animated {
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.fadeIn {
    opacity: 0;
}
.slideFromTop {
    -webkit-transform: translateY(-150%);
    -moz-transform: translateY(-150%);
    transform: translateY(-150%);
}
.animated.fadeIn {
    opacity: 1;
}
.animated.slideFromTop {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}
/*** Single Effects ***/
.hp-thumb,
.pb-thumb {
    -webkit-transition: transform 300ms ease-in;
    -moz-transition: transform 300ms ease-in;
    transition: transform 300ms ease-in;
}
.hp-desc,
.pb-mask {
    opacity: 0;

    -webkit-transition: opacity 300ms ease-out 200ms;
    -moz-transition: opacity 300ms ease-out 200ms;
    transition: opacity 300ms ease-out 200ms;
}
.hp-desc p {
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
    transform: translateY(-200px);

    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}
.hp-btn {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
/* Hover start! */
.hp-box:hover > .hp-desc .hp-btn {
    -webkit-transition: all 800ms ease-out;
    -moz-transition: all 800ms ease-out;
    transition: all 800ms ease-out;
}
.hp-box:hover > .hp-thumb,
.pb-hovbox:hover > .pb-thumb {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transform: scale(1.3);
}
.hp-box:hover > .hp-desc {
    opacity: 1;
}
.hp-box:hover > .hp-desc p,
.hp-box:hover > .hp-desc .hp-btn {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}
/* Product categories page's effect */
.pb-mask {
    -webkit-transform: translateY(100%);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.pb-hovbox:hover > .pb-mask {
    opacity: 1;
    -webkit-transform: translateY(0);
}

/*** Page Animations ***/
.head-top ul,
.main-content {
    animation: fadeIn 600ms ease-in;
    -moz-animation: fadeIn 600ms ease-in;
    -webkit-animation: fadeIn 600ms ease-in;
}
header nav li {
    animation: fadeIn 1300ms ease-in;
    -moz-animation: fadeIn 1300ms ease-in;
    -webkit-animation: fadeIn 1300ms ease-in;
}
.logo,
.prd-box,
.spl-info {
    animation: smallTo1 600ms ease-out;
    -moz-animation: smallTo1 600ms ease-out;
    -webkit-animation: smallTo1 600ms ease-out;
}
/* ===== KEYFRAMES ====== */
/* Scale From Nothing to Full Element  */
@keyframes smallTo1 {
    from {transform: scale(0)}
    to {transform: scale(1)}
}
@-moz-keyframes smallTo1 {
    from {-moz-transform: scale(0)}
    to {-moz-transform: scale(1)}
}
@-webkit-keyframes smallTo1 {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}
/* FadeIn */
@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}
@-moz-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}
@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

/***** Import *****/
@font-face {
    font-family: Open Sans;
    src: url('fonts/OpenSans-Regular.ttf');
}
@font-face {
    font-weight: bold;
    font-family: Open Sans;
    src: url('fonts/OpenSans-Bold.ttf');
}
@font-face {
    font-weight: 600;
    font-family: Open Sans;
    src: url('fonts/OpenSans-Semibold.ttf');
}
@font-face {
    font-weight: 800;
    font-family: Open Sans;
    src: url('fonts/OpenSans-ExtraBold.ttf');
}